<template>
  <div id="newTask">
    <div class="card">
      <el-card v-for="taskType in option[this.$api.Enum.DicTypeTaskType]" :key="taskType.id">
        <i class="iconfont icon-Copy"></i>
        <div class="content">
          <h3>{{ taskType.name }}</h3>
          <div class="button">
            <el-button v-for="operator in option[$api.Enum.DicTypeOperator]" :key="operator.id"
              @click="taskCreate(taskType.id, operator.id, `${taskType.name}-${operator.name}`)">{{ operator.name}}</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <myDialog ref="createTaskDialog" :dialogTitle="dialogTitle" :body="true">
      <el-form v-if="newTaskForm.type === 51 ? true : false" class="dialogForm" label-position="top">
        <el-form-item label="卡类型">
          <el-radio v-for="item in option[$api.Enum.DicTypeCardType]" :key="item.id" v-model="newTaskForm.card_type"
            :label="item.id">{{ item.name }}</el-radio>
        </el-form-item>

        <el-form-item label="渠道">
          <el-select v-model="newTaskForm.channel_id" filterable placeholder="请选择">
            <el-option v-for="item in createTaskChannelList" :key="item.value" :label="item.name" :value="item.id" v-show="item.extend.operator_key == newTaskForm.operator_key"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="网络制式">
          <el-radio v-for="item in option[$api.Enum.DicTypeCardSystem]" :key="item.id" v-model="newTaskForm.net_service"
            :label="item.id">{{ item.name }}</el-radio>
        </el-form-item>

        <el-form-item label="是否实名">
          <el-radio v-for="item in option[$api.Enum.DicTypeCardRealName]" :key="item.id" v-model="newTaskForm.is_verified"
            :label="item.id">{{ item.name }}</el-radio>
        </el-form-item>

        <el-form-item label="卡状态">
          <el-select v-model="newTaskForm.card_status" clearable placeholder="请选择">
            <el-option v-for="item in option[$api.Enum.DicTypeCardStatus]" :key="item.id" :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="获得时间">
          <el-date-picker style="width: 100%" v-model="newTaskForm.get_date" value-format="yyyy-MM-dd"
            format="yyyy 年 M 月 d 号" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>

        <el-form-item label="沉默周期/月">
          <el-input type="number" v-model="newTaskForm.silent_cycle" placeholder="请确认沉默期,到期后运营商将自动激活或销户,准确输入系统将提前告知。"></el-input>
        </el-form-item>

        <el-form-item label="任务名称">
          <el-input v-model="newTaskForm.title" placeholder="请输入任务名称，用于任务说明"></el-input>
        </el-form-item>

        <el-form-item class="buttonBox">
          <el-button type="success" @click="submitNewTaskForm">提交</el-button>
        </el-form-item>
      </el-form>

      <!--应用商分配-->
      <el-form v-else-if="newTaskForm.type === 55 ? true : false" class="dialogForm" label-position="top">
        <el-form-item label="应用商">
          <el-select v-model="newTaskForm.agent_app_id" clearable @change="newTaskForm.group_id = ''" placeholder="请选择应用商">
            <el-option v-for="item in option[$api.Enum.DicTypeResellerList]" :key="item.value" :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="套餐组">
          <el-select placeholder="请选择套餐组" v-model="newTaskForm.group_id" :disabled="!Boolean(newTaskForm.agent_app_id)">
             <el-option v-for="(item, index) in option[$api.Enum.DicTypeComboGroupList]"
                        :key="index" :label="item.name" :value="item.id"
                        v-if="item.extend.agent_app_id == newTaskForm.agent_app_id"
                        :disabled="newTaskForm.operator_key == $api.Enum.OperatorUnicom && item.extend.cycle_mode == $api.Enum.CycleModeDayOverlay"
             ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="任务名称">
          <el-input v-model="newTaskForm.title" placeholder="请输入任务名称，用于任务说明"></el-input>
        </el-form-item>

        <el-form-item label="目标存在">
          <el-radio v-model="newTaskForm.goal_exist" :label="1">覆盖</el-radio>
          <el-radio v-model="newTaskForm.goal_exist" :label="2">跳过</el-radio>
        </el-form-item>

        <el-form-item class="buttonBox">
          <el-button type="success" @click="submitNewTaskForm">提交</el-button>
        </el-form-item>
      </el-form>

      <el-form v-else-if="newTaskForm.type === 56 ? true : false" class="dialogForm" label-position="top">
        <el-form-item label="任务名称">
          <el-input v-model="newTaskForm.title" placeholder="请输入任务名称，用于任务说明"></el-input>
        </el-form-item>

        <el-form-item label="目标存在">
          <el-radio v-model="newTaskForm.goal_exist" :label="1">跳过</el-radio>
          <el-radio v-model="newTaskForm.goal_exist" :label="2">覆盖</el-radio>
        </el-form-item>

        <el-form-item label="应用">
          <el-select v-model="newTaskForm.app_id" filterable placeholder="请选择应用">
            <el-option v-for="item in option[$api.Enum.DicTypeAppList]" :key="item.value" :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="buttonBox">
          <el-button type="success" @click="submitNewTaskForm">提交</el-button>
        </el-form-item>
      </el-form>

      <el-form v-else-if="newTaskForm.type === 57 ? true : false" class="dialogForm" label-position="top">
        <el-form-item label="任务名称">
          <el-input v-model="newTaskForm.title" placeholder="请输入任务名称，用于任务说明"></el-input>
        </el-form-item>

        <el-form-item label="目标存在">
          <el-radio v-model="newTaskForm.goal_exist" :label="1">跳过</el-radio>
          <el-radio v-model="newTaskForm.goal_exist" :label="2">覆盖</el-radio>
        </el-form-item>

        <el-form-item label="代理商">
          <el-select v-model="newTaskForm.agent_agency_id" filterable placeholder="请选择代理商">
            <el-option v-for="item in option[$api.Enum.DicTypeResellerList]" :key="item.value" :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="buttonBox">
          <el-button type="success" @click="submitNewTaskForm">提交</el-button>
        </el-form-item>
      </el-form>

      <el-form v-else-if="newTaskForm.type === 58 ? true : false" class="dialogForm" label-position="top">
        <el-form-item label="任务名称">
          <el-input v-model="newTaskForm.title" placeholder="请输入任务名称，用于任务说明"></el-input>
        </el-form-item>

        <el-form-item label="目标存在">
          <el-radio v-model="newTaskForm.goal_exist" :label="1">跳过</el-radio>
          <el-radio v-model="newTaskForm.goal_exist" :label="2">覆盖</el-radio>
        </el-form-item>

        <el-form-item label="零售商">
          <el-select v-model="newTaskForm.agent_retailer_id" filterable placeholder="请选择代理商">
            <el-option v-for="item in option[$api.Enum.DicTypeResellerList]" :key="item.value" :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="buttonBox">
          <el-button type="success" @click="submitNewTaskForm">提交</el-button>
        </el-form-item>
      </el-form>

      <el-form v-else-if="newTaskForm.type === 3" class="dialogForm" label-position="top">
        <el-form-item label="应用商" v-if="user.level<11">
          <el-select v-model="newTaskForm.agent_app_id" clearable @change="newTaskForm.group_id = '';newTaskForm.combo_id = ''" placeholder="请选择应用商">
            <el-option v-for="item in option[$api.Enum.DicTypeResellerList]" :key="item.value" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="套餐组">
          <el-select v-model="newTaskForm.group_id" :disabled="!newTaskForm.agent_app_id" placeholder="请选择套餐组">
            <el-option v-for="item in option[$api.Enum.DicTypeComboGroupList]" :label="item.name" :value="item.id" v-if="item.extend.agent_app_id == newTaskForm.agent_app_id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="套餐">
          <el-select v-model="newTaskForm.combo_id" :disabled="!newTaskForm.group_id" placeholder="请选择套餐">
            <el-option v-for="item in option[$api.Enum.DicCombo]" :label="item.name" :value="item.id" v-show="item.extend.group_id == newTaskForm.group_id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="任务名称">
          <el-input v-model="newTaskForm.title" placeholder="请输入任务名称，用于任务说明"></el-input>
        </el-form-item>

        <el-form-item class="buttonBox">
          <el-button type="success" @click="submitNewTaskForm">提交</el-button>
        </el-form-item>
      </el-form>
    </myDialog>
  </div>
</template>

<script>
export default {
  name: "WuliankaNewtask",

  data() {
    return {
      user:{},
      option: [],
      newTaskForm: {},
      channelList: [],
      dialogTitle: '',
      createTaskChannelList: [],
      createTaskComboGroup: []
    };
  },

  mounted() {
    this.user = this.$tool.getUser()
    this.$api.foundation.dicListExtendCache(
      [
        this.$api.Enum.DicTypeTaskType,
        this.$api.Enum.DicTypeOperator,
        this.$api.Enum.DicTypeChannelType,
        this.$api.Enum.DicTypeCardStatus,
        this.$api.Enum.DicTypeTaskStatus,
        this.$api.Enum.DicTypeCardType,
        this.$api.Enum.DicTypeCardSystem,
        this.$api.Enum.DicTypeCardRealName,
        this.$api.Enum.DicTypeResellerList,
        this.$api.Enum.DicTypeComboGroupList,
        this.Enum.DicCombo,
        this.$api.Enum.DicTypeAppList,
        this.$api.Enum.DicTypechannelList,
      ],
      {},
      res => {
        this.option = res;
        this.createTaskComboGroup = this.option[this.$api.Enum.DicTypeComboGroupList]
        this.createTaskChannelList = res[this.$api.Enum.DicTypechannelList]
      }
    );

  },

  methods: {
    taskCreate(type, operator_key, dialogTitle) {
      this.newTaskForm = {
        type: type,
        operator_key: operator_key,
        agent_app_id: '',
        group_id: '',
        combo_id: '',
      }
      this.dialogTitle = dialogTitle
      if (this.user.level == 11){
        this.newTaskForm.agent_app_id = this.user.user_id
      }
      this.$refs.createTaskDialog.dialog = true
    },

    submitNewTaskForm() {
      let data = this.$tool.copyJSON(this.newTaskForm)
      data.silent_cycle = Number(data.silent_cycle)
      data.combo_id = Number(data.combo_id)
      data.agent_app_id = Number(data.agent_app_id)
      data.group_id = Number(data.group_id)

      this.$api.task.taskCreate(data, res => {
        if (!res.status) {
          return this.$message.error(res.message)
        }
        this.$message.success('创建成功')
        this.$router.push('/taskDetail?index=1')
        localStorage.setItem('taskId', res.data.id)
      });
    },
  }
};
</script>
<style lang="less" scoped>
#newTask {
  .card {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .el-card {
      min-width: 310px;

      .content {
        float: right;
        text-align: center;

        .button {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          width: 275px;
        }
      }

      .iconfont {
        font-size: 80px;
        color: #1296db;
      }
    }
  }
}
</style>